<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf Learn</title>
<!--    先解释jq @{}为绝对路径-->
    <script th:src="@{/webjars/jquery/3.3.1/jquery.min.js}"></script>
<!--           解释js-->
    <script th:src="@{/webjars/bootstrap/4.3.1/js/bootstrap.min.js}"></script>
<!--    解释css-->
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}"/>
<!--    引入自己写的css样式-->
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/style.css}">
</head>
<body>
    <h1>Hello,Thymeleaf</h1>
    <img id="img1" alt="如果看到我说明图片挂了.." th:src="@{/static/imgs/boy.jpg}" title="小哥哥" width="100px" height="100px">
    <button id="btn1" class="btn btn-info">请点我!</button>
    <div id="div1"></div>

    <hr>
<!--    th中的链接表达式标签-->
    <a th:href="@{https://www.baidu.com}">百度</a>
<!--    请求方式-->
    <a th:href="@{/web/link1(id=1,type='链接1')}">链接1</a>
    <a th:href="@{/web/link2/{id}(id=1111)}">链接2</a>
    <a th:href="@{/web/link3/{id}(id=1111)/{type}(type='链接3')}">链接3</a>

    <br>
<hr>
<h3>图片上传与回显，上传图片</h3>
<!--    访问后端使用@{/}/为绝对路径 上传图片与文件要制定类型-->
<form th:action="@{/file/upload}" method="post" enctype="multipart/form-data">
    选择文件上传
    <br>
    <input type="file" name="upFile">
    <br>
    <input type="submit" value="上传">
    <hr>
</form>
    <h3>传值测试</h3>
    <a th:href="@{/test/value1?valueRre=1}">传值测试</a>
    <span th:text="${v2}"></span>
    <span th:text="${v1}"></span>

</body>
    <script type="text/javascript">
        $("#btn1").click(function (){
            console.log("按钮被点击")
            let val=$("#div1").html();
            if (val.length==0){
                //[[@{/}]]被解析为/
                $("#img1").attr({"src":"[[@{/}]]static/imgs/girl.jpg","title":"小姐姐"});
                $("#div1").html("哎呀被发现咯~");
            }else if (val!=''){
                $("#img1").attr({"src":"[[@{/}]]static/imgs/boy.jpg","title":"小哥哥"});
                $("#div1").html("");
            }
        });
    </script>
</html>